<template>
  <div class="editor-box">
     <div class="article-title-input">
       文章标题
       <el-input v-model="title"></el-input>
     </div>
    <QuillEditor
        ref="quillEditorRef"
        :options="options"
        v-model:content="content"
        contentType="html"
        @textChange="textChange"
    />
    <!-- 使用input 标签劫持原本视频上传事件，实现视频上传 -->
    <input
        type="file"
        accept="video/*"
        name="file"
        ref="uploadFileVideo"
        id="uploadFileVideo"
        @change="handleVideoUpload"
        style="opacity: 0; width: 0; height: 0; cursor: pointer"
    />
    <!--使用input 标签劫持原本图片上传事件，实现图片上传-->
    <input
        type="file"
        name="file"
        id="uploadFileImg"
        ref="uploadFileImg"
        @change="handleImgUpload"
        style="opacity: 0; width: 0; height: 0; cursor: pointer"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
// import ImageResize from 'quill-image-resize-module'  //添加

const title = ref('');
const content = ref('')

//自定义字体大小
let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = ["12px", "14px", "16px", "20px", "24px", false];
Quill.register(fontSizeStyle, true);
//自定义quill编辑器的字体
var fonts = [
  "Microsoft-YaHei",
  "YouYuan",
  "SimSun",
  "SimHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

const quillEditorRef = ref();
const uploadFileImg = ref();
const uploadFileVideo = ref();
const options = ref({
  theme: "snow",
  bounds: window.document.body,
  debug: "warn",
  modules: {
    // 工具栏配置
    toolbar: {
      container: [
        [
          {
            font: fonts,
          },
        ], // 字体种类
        [
          {
            size: ["12px", "14px", "16px", "20px", "24px", false],
          },
        ], // 字体大小
        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
        ["blockquote", "code-block"], // 引用  代码块
        [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
        [{ indent: "-1" }, { indent: "+1" }], // 缩进
        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
        [{ align: [] }], // 对齐方式
        ["clean"], // 清除文本格式
        ["link", "image", "video"], // 链接、图片、视频
      ],
      handlers: {
        video: function (val) {
          // 劫持原来的视频点击按钮事件
          document.querySelector("#uploadFileVideo")?.click();
        },
        image: function () {
          // 劫持原来的图片点击按钮事件
          document.querySelector("#uploadFileImg")?.click();
        },
      },
    },
    // imageResize: {
    //   //添加
    //   displayStyles: {
    //     //添加
    //     backgroundColor: "black",
    //     border: "none",
    //     color: "white",
    //   },
    //   modules: ["Resize", "DisplaySize"], //添加
    // },
  },

  placeholder: "请输入文章内容",
});

//图片上传
const handleImgUpload = async (evt) => {
  if (evt.target.files.length === 0) {
    return;
  }
  const formData = new FormData();
  formData.append("file", evt.target.files[0]);
  try {
    const res = ""; //图片上传的接口
    let quill = toRaw(quillEditorRef.value).getQuill();
    // 获取光标位置
    let length = quill.selection.savedRange.index;
    quill.insertEmbed(length, "image", res.data.url);
    // 调整光标到最后
    quill.setSelection(length + 1);
  } catch (error) {
    console.log(error);
  }
  uploadFileImg.value.value = "";
};

//视频上传
const handleVideoUpload = async (evt) => {
  if (evt.target.files.length === 0) {
    return;
  }
  const formData = new FormData();
  formData.append("file", evt.target.files[0]);
  try {
    const res = ""; //图片上传接口
    let quill = toRaw(quillEditorRef.value).getQuill();
    // 获取光标位置
    let length = quill.selection.savedRange.index;
    quill.insertEmbed(length, "video", res.data.url);
    // 调整光标到最后
    quill.setSelection(length + 1);
  } catch (error) {
    console.log(error);
  }
  uploadFileVideo.value.value = "";
};
//将富文本的内容抛出
// const textChange = () => {
//   emit("update:modelValue", content);
// };
</script>

<style scoped lang="less">
.editor-box{
  width: 100%;
  padding: 20px 40px;
  height: calc(100vh - 200px);

  .article-title-input{
    display: flex;
    margin-bottom: 10px;
    align-items: center;

    .el-input{
      margin-left: 10px;
      flex: 1;
    }
  }
}
</style>
